<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <link rel="stylesheet" type="text/css" href="css/cglist.css"/>
	    <link rel="stylesheet" type="text/css" href="css/product.css"/>
	    <script type="text/javascript" src="js/jquery.1.9.1.js" ></script>
	    <script type="text/javascript" src="js/rem.js" ></script>
	    <script type="text/javascript" src="js/mescroll.min.js" ></script>
		<link rel="stylesheet" type="text/css" href="css/mescroll.min.css"/>
		<title>选择产品</title>
	</head>
	<body>
		<div class="top">
			<div class="top_left">
				<span class="top_left_con1">产品分类</span>
				<img class="top_left_xia1" src="img/jtxia.png" />
				<img class="top_left_up1" src="img/jtup.png" />
			</div>
			<div class="sou"></div>
			<div class="cate_mid">
			    <form id="searchForm" name="searchForm" method="get" action="" onsubmit="">
			        <div class="text_box" name="list_search_text_box" onclick="">
			            <input id="keyword" name="search" type="text" placeholder="搜索" class="text" value="">
			            <input type="submit" value="" class="submit" id="list_search_submit">
			            <div class="close">取消</div>
			        </div>
			    </form>
			</div>
		</div>
		<ul class="company">
			<li style="color: #457bc7;">全部<img src="img/jtyou.png" /></li>
			<li>分类1<img src="img/jtyou.png" /></li>
			<li>分类2<img src="img/jtyou.png" /></li>
			<li>分类3<img src="img/jtyou.png" /></li>
			<li>分类4<img src="img/jtyou.png" /></li>
		</ul>
		<ul class="productinfo">
			<li>
				<input type="checkbox" checked autocomplete="off" name="selectOne" value="" class="f_checkbox check-wrapper check-wrapper-1">
				<div class="infoleft"><img src="img/product.png"/></div>
				<div class="inforight">
					<p>小学生绘本课堂  年级阅读  二年级</p>
					<p class="infop2">CP001</p>
					<div class="infop3">
						库存:<span>200</span>
						<input class="info3_right" type="button" value="+" />
						<div class="box">
							<div>
								<input class="cut" type="button" value="-" onclick="goods_cut(1);" />
							</div>
							<div>
								<input class="num" type="number" id="sku_number1" name="number" value="1" />
							</div>
							<div>
								<input class="add" type="button" value="+" onclick="goods_add(1);" />
							</div>
					  </div>
					</div>
				</div>
			</li>
		</ul>
		<div class="footer">
			<input id="all" type="checkbox" autocomplete="off" class="f_checkbox f_pub_checkbox f_pub_checkbox_1" title="1">
			<span>已选：<span class="xuannum"></span>项</span>
		</div>
		<a href="add.html"><div class="queding">确定</div></a>
	</body>
<script>//头部下拉
	$(function(){
		var winHeight = $(window).height();
		var topHeight = $('.top').height();
		var topPadding = parseFloat($('.top').css('padding-top'))*2;
		var conHeight = winHeight-topHeight;
		$('.company').css({'height':conHeight+'px','top':topHeight+topPadding+1+'px'});
		$('.top_left').click(function(){
			$('.company').toggle();
			$('.top_left_xia1').toggle();
			$('.top_left_up1').toggle();
			$('.top_left_con1').css('color','#000');
		});
		$('.company li').click(function(){
			$('.top_left_xia1').show();
			$('.top_left_up1').hide();
			$(this).css('color','#457bc7').siblings().css('color','#000');
			$('.company').hide();
			var CompanyName = $(this).text();
			$('.top_left_con1').text(CompanyName);
			$('.top_left_con1').css('color','#555');
		});
		$('.sou').click(function(){
			$('.cate_mid').show();
			$('.company').hide();
			$('.top_left_up1').hide();
			$('.top_left_xia1').show();
			$('.top_left_con1').css('color','#555');
		});
		$('.close').click(function(){
			$('.cate_mid').hide();
		});
	});
</script>
<script>//数量加减
function goods_cut(val){  
	var num_val=document.getElementById('sku_number'+val);  
	var new_num=num_val.value;  
	var Num = parseInt(new_num);  
	if(Num>1)Num=Num-1;  
	num_val.value=Num;  
}
function goods_add(val){ 
var num_val=document.getElementById('sku_number'+val);  
var new_num=num_val.value;  
var Num = parseInt(new_num);  
Num=Num+1;  
num_val.value=Num;  
}
$(function(){
	$('.info3_right').click(function(){
		$(this).hide();
		$(this).siblings('.box').show();
	});
	$('.box input').click(function(){
		var num = $(this).siblings('.num').val();
		if(num<2){
			$('.cut').css('background','#d9d9d9');
		}else{
			$('.cut').css('background','#ffa400');
		}
		var kucun = parseInt($(this).parents('.infop3').children().first().text())-1;
		
		if(num>kucun){
			$('.add').css('background','#d9d9d9');
		}else{
			$('.add').css('background','#ffa400');
		}
	});
	$('.num').keyup(function(){
		var num = $(this).siblings('.num').val();
		if(num<2){
			$('.cut').css('background','#d9d9d9');
		}else{
			$('.cut').css('background','#ffa400');
		}
		var kucun = parseInt($(this).parents('.infop3').children().first().text())-1;
		if(num>kucun){
			$('.add').css('background','#d9d9d9');
		}else{
			$('.add').css('background','#ffa400');
		}
	})
});
</script>
<script>//全选
	$(function(){
		$(document).ready(function() { 
			var chknum = $(".productinfo li :checkbox").length;//选项总个数
			var xuannum = $(".productinfo li :checkbox[checked]").length;//选中的总个数
			$('.xuannum').text(xuannum);
			if(chknum==xuannum){//全选
				$("#all").prop("checked",true);
			}
			else{//不全选
				$("#all").prop("checked",false);
			}
		});
		$("#all").click(function(){   
		    	if(this.checked){  
		    		var xuannum = $(".productinfo li :checkbox").length;//选项总个数
		    		$('.xuannum').text(xuannum);
		        	$(".productinfo li :checkbox").prop("checked", true);  
		    	}else{   
				$(".productinfo li :checkbox").prop("checked", false);
				$('.xuannum').text('0');
		    	}  
	 	});
	 	$(".productinfo li :checkbox").click(function(){
			allchk();
		});
	 	function allchk(){
			var chknum = $(".productinfo li :checkbox").length;//选项总个数
			var chk = 0;
			$(".productinfo li :checkbox").each(function () {  
		        if($(this).prop("checked")==true){
					chk++;
				}
		   });
			$('.xuannum').text(chk);
			if(chknum==chk){//全选
				$("#all").prop("checked",true);
			}
			else{//不全选
				$("#all").prop("checked",false);
			}
		}
	});
</script>
</html>
